<template>
  <div class="app-main" v-loading="loading">
    <div class="divTmp" v-show="loading"></div>
    <div class="course-homework-page course-second-page student-model"
         v-show="!loading">
      <div class="homework-page-header course-second-header clearfix">
        <view-tip title="作业"
                  text="所在班级发布的所有个人作业、小组作业及测验都在这里。请注意作业或测验的开始、结束时间，按时完成作业、测验哦"
                  img="https://static.ulearning.cn/static/course_web/common/img/title_image/img_homework.png"
        />
      </div>
      <div class="homework-page-body" v-if="this.type === 'student' && !showHomework">
        <el-table
            :data="tableDataStu"
            class="table-groups table-homework student"
            style="width: 100%;">
          <el-table-column
              prop="label"
              align="left"
              width="370">
            <template slot="header" slot-scope="scope">
              <span>作业名称 &nbsp;&nbsp;</span>
              <span style=" font-size: 12px;
                      color: #969696;
                      font-weight: 400;">总计{{ pagination.counts }}个</span>
            </template>
            <template slot-scope="scope">
              <div class="td item-label">
                <label class="label-solid label-personal">个人</label>
              </div>
              <div class="td item-name">
                <span style="color:#000;">{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="creator"
              label="创建人"
              width="72">
          </el-table-column>
          <el-table-column
              label="时间"
              width="194">
            <template slot-scope="scope">
              <div>{{ scope.row.startTime }}&nbsp;开始</div>
              <div>{{ scope.row.endTime }}&nbsp;结束</div>
            </template>
          </el-table-column>
          <el-table-column
              label="状态"
              width="158">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.status === 0">未开始</span>
                <span v-else-if="scope.row.status === 1">进行中</span>
                <span v-else-if="scope.row.status === 2">已结束</span>
                &nbsp;
                <span v-if="scope.row.score !== 0">{{ scope.row.score }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              width="80">
            <template slot-scope="scope">
              <button class="button button-red-hollow"
                      @click="view(1,scope.$index)">查看</button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
              class="course-student-pagination pagination-wrap stu-pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="pagination.page"
              :page-size="pagination.pageSize"
              layout="prev,pager,next, jumper"
              :total="pagination.counts">
          </el-pagination>
        </div>

      </div>
      <div class="homework-page-body" v-else-if="type === 'teacher' && !showHomework">

        <div class="input-search-group">
          <input type="text"
                 class="text-input text-input-gray"
                 v-model="pagination.name"
                 placeholder="输入关键字搜索">
          <i @click="search" class="el-icon-search glyphicon glyphicon-search"></i>

        </div>
        <button class="button button-red-hollow"
                style="margin-top: 10px"
                @click="add">添加作业</button>

        <el-table
            :data="tableDataTea"
            class="table-groups table-homework student"
            style="width: 100%;">
          <el-table-column
              prop="label"
              align="left"
              width="370">
            <template slot="header" slot-scope="scope">
              <span>作业名称 &nbsp;&nbsp;</span>
              <span style=" font-size: 12px;
                      color: #969696;
                      font-weight: 400;">总计{{ pagination.counts }}个</span>
            </template>
            <template slot-scope="scope">
              <div class="td item-label">
                <label class="label-solid label-personal">个人</label>
              </div>
              <div class="td item-name">
                <span style="color:#000;">{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="creator"
              label="创建人"
              width="72">
          </el-table-column>
          <el-table-column
              label="时间"
              width="194">
            <template slot-scope="scope">
              <div>{{ scope.row.startTime }}&nbsp;开始</div>
              <div>{{ scope.row.endTime }}&nbsp;结束</div>
            </template>
          </el-table-column>
          <el-table-column
              prop="status"
              label="完成状态"
              width="158">
            <template slot-scope="scope">
              <div>{{ scope.row.completed }}/{{ scope.row.total }}
                &nbsp;&nbsp;
                <span v-if="scope.row.status === 0">未开始</span>
                <span v-else-if="scope.row.status === 1">进行中</span>
                <span v-else-if="scope.row.status === 2">已结束</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              width="80">
            <template slot-scope="scope">
              <button class="button button-red-hollow"
                      @click="view(2,scope.$index)">查看</button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
              class="course-student-pagination pagination-wrap stu-pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="pagination.page"
              :page-size="pagination.pageSize"
              layout="prev,pager,next, jumper"
              :total="pagination.counts">
          </el-pagination>
        </div>

      </div>
      <div class="homework-page-body" v-show="showHomework">
        <empty info="暂无作业"/>
      </div>

    </div>
  </div>
</template>

<script>
import ViewTip from '../../../../components/tip/ViewTip'
import {homeworkStuGetById} from "@/apis/student";
import {homeworkTeaGetById} from "@/apis/teacher";
import Empty from './Empty'

export default {
  components: {
    ViewTip,
    Empty,

  },
  props:{
    type: String,
    item: {},
  },
  data() {
    return {
      loading: true,
      showHomework: false,
      tableDataStu: [],
      tableDataTea: [],
      pagination: {
        courseId: '',
        pageSize: 10,
        page: 1,
        name: '',
        counts: 0,
        id: '',
      },
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 初始化资源
    async init() {
      this.closeLoading()
      this.pagination.id = localStorage.getItem("id")
      this.pagination.courseId = this.item.id
      if (this.type === 'student') {
        homeworkStuGetById(this.pagination).then(resp => {
          if(resp?.data?.code === 1){
            this.tableDataStu = resp?.data?.data?.records
            this.pagination.counts = resp?.data?.data?.total

            if(resp?.data?.data?.total === 0){
              this.showHomework = true
            }
          }
        })
      }
      if (this.type === 'teacher') {
        homeworkTeaGetById(this.pagination).then(resp => {
          if(resp?.data?.code === 1){
            this.tableDataTea = resp?.data?.data?.records
            this.pagination.counts = resp?.data?.data?.total

            if(resp?.data?.data?.total === 0){
              this.showHomework = true
            }
          }
        })
      }

    },
    // 查看作业
    view(code,index){
      if(code === 1){
        this.$router.push({
          name: 'stuHomeworkView',
          query:{
            item: JSON.stringify(this.item),
            stu: JSON.stringify(this.tableDataStu[index]),
          }
        }).catch(r => {console.log(r)})
      }

      if(code === 2){
        this.$router.push({
          name: 'teaHomeworkView',
          query:{
            item: JSON.stringify(this.item),
            tea: JSON.stringify(this.tableDataTea[index]),
          }
        }).catch(r => {console.log(r)})
      }
    },


    // 添加作业
    add(){
      this.$router.push({
        name: 'teaHomework',
        query: {
          item: JSON.stringify(this.item)
        }
      }).catch(r => {console.log(r)})
    },
    // 搜索
    search(){
      this.init()
    },

    // 分页菜单页码的改变
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      this.pagination.page = val
      this.init()
    },

    // 加载动画
    closeLoading() {
      this.timer = null
      this.timer = setTimeout(() => {
        this.loading = false
      }, 500)
    },

  },


}
</script>

<style scoped>

.divTmp {
  width: 100%;
}

::v-deep .el-loading-mask {
  transition: opacity 0s;
}

::v-deep .el-loading-spinner {
  top: 100%;
  margin-top: 30%;
  width: 100%;
  text-align: center;
  position: absolute;
}

.course-second-header {
  padding-bottom: 20px;
  border-bottom: 1px solid #e3e3e9;
}

.table-groups {
  line-height: 64px;
  color: #969696;
}

::v-deep .el-table th.el-table__cell > .cell {
  color: black;
}

::v-deep .el-table__empty-block {
  min-height: 64px;
}

::v-deep .el-table__empty-text {
  line-height: 64px;
}

.item-label {
  padding-right: 0;
}

.td {
  float: left;
}

.item-label {
  width: 42px;
}

.td label {
  margin-bottom: 0;
}

label {
  vertical-align: middle;
}

.label-solid.label-personal {
  background-color: #f2efff;
}

.label-solid {
  text-align: center;
  border-radius: 2px;
  color: #8d77fb;
  width: 32px;
  line-height: 18px;
  font-size: 12px;
}

label {
  display: inline-block;
  font-weight: 700;
}

.button {
  padding: 0;
  min-width: 64px;
  color: #7691fc;
  background-color: #fff;
  border-color: #e3e3e9;
}

.button-red-hollow:hover {
  border-color: #7691fc;
}

.pagination-container {
  margin: 12px auto;
  padding-top: 10px;
  text-align: center;
}


.input-search-group {
  margin-left: 67.5%;
  margin-right: 12px;
  margin-top: 10px;
  width: 200px;
  border-radius: 999px;
  background-color: #efeff7;
  position: relative;
  display: inline-block;
  height: 32px;
  line-height: 30px;
  font-size: 14px;
  vertical-align: middle;
}

.text-input {
  padding-left: 16px;
  padding-right: 34px;
  background-color: transparent;
  border: none;
  min-width: 200px;
  max-width: 400px;
  height: 100%;
  line-height: 30px;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.glyphicon {
  right: 10px;
  margin: auto;
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 16px;
  font-size: 16px;
  color: #cbcbd1;
}

</style>